<template>
	<div class="listEditTitQueryWrap">
        <template v-if="type == 'add'">
			<div class="typeArea">
				<listEditTitQueryBtn></listEditTitQueryBtn>
			</div>
			<!--输入框类型-->
			<listEditTitQueryType ref="listEditTitQueryType"></listEditTitQueryType>
			<!--预览页面-->
			<p class="autoPreview">
				<span>实时预览：</span>
			</p>
			<listEditTitQueryPreview 
				:pageConfig="pageConfig"
				v-if='isShowPreview'>
			</listEditTitQueryPreview>
			<div class="btnArea">
				<el-button @click="cancelTem">关闭</el-button>
				<el-button @click="confrimTem" type="primary">添加</el-button>
			</div>
		</template>
		<template v-if="type == 'delete'">
			<ul>
				<li class="deleteLi" v-for="(item,index) in deleteArray" :key="index">
					<span class="deleteLabel">{{item.label.split("：")[0]}}</span>
					<el-button @click="deleteMet(item,index)" type="danger">删除</el-button>
				</li>
			</ul>
			<div class="btnArea">
				<el-button @click="cancelTem">关闭</el-button>
			</div>
		</template>
	</div>
</template>
<script type="text/javascript">
	import listEditTitQueryBtn from '@/components/pageFunction/list_edit_titQuery_btn.vue';
	import listEditTitQueryType from '@/components/pageFunction/list_edit_titQuery_type.vue';
	import listEditTitQueryPreview from '@/components/pageFunction/list_edit_titQuery_preview.vue';
	export default{
		props:{
			type:""
		},
		data () {
			return {
				deleteArray:[],
				searchForm:{},
				pageConfig:{},
				isShowPreview:false
			}
		},
		beforeCreate() {
			this.$mitt.off("listTypeInput",this.listTypeInputMet);
		},
		async created (){
			this.$mitt.on("listTypeInput",this.listTypeInputMet);
			if(this.type == 'delete'){
				//删除输入框，读取数据
				const result = await this.$util.native.readJson(this.$pinia.state.value.routeConfig.nowItem);
				this.deleteArray = result.searchForm;
			}
        },
        watch:{
            
        },
		components : {
			listEditTitQueryBtn,
			listEditTitQueryType,
			listEditTitQueryPreview
		},
		methods : {
			cancelTem(){
				this.$mitt.emit("closeEditComponent");
			},
			listTypeInputMet(config){
				this.pageConfig = config;
				this.searchForm = config.searchForm[0];
				this.isShowPreview = true;
			},
			async confrimTem(){
				//判空
				if(this.searchForm.labelEnData == ''){
					this.$message.error("请输入必填项！");
					return;
				}
				//修改json数据到json文件
				await this.$util.native.addInput(this.$pinia.state.value.routeConfig.nowItem,this.searchForm);
				//刷新画板展示
				this.$mitt.emit("onlyRefreshComponent");
				//重置选择框数据
				this.$refs.listEditTitQueryType.resetAdd();
			},
			resetAdd(){
				this.labelData = "";
				this.labelEnData = "";
				this.selectType = "";
				this.placeholder = "";
				this.options = JSON.stringify([{"value":"","label":"请选择"}]);
			},
			async deleteMet(item,index){
				this.deleteArray.splice(index,1);
				//删除某个input输入框
				await this.$util.native.deleteInput(this.$pinia.state.value.routeConfig.nowItem,item,index);
				//刷新画板展示
				this.$mitt.emit("onlyRefreshComponent");
			}
		}
	}
</script>
<style type="text/css" lang="less">
	.listEditTitQueryWrap{
        width: 380px;
		.btnArea{
			margin-top: 20px;
            .el-button{
                width: 25%;
            }
        }
		.autoPreview{
			margin-top:20px;
			margin-bottom:10px;
			padding-top:16px;
			font-size:12px;
			border-top: 1px solid #e5e6ec;
		}
		.deleteLi{
			border-bottom:1px solid #E5E6EC;
			height: 50px;
			.deleteLabel{
				font-size: 14px;
				line-height:50px;
			}
			.el-button{
				float: right;
				margin-top: 9px;
			}
		}
		.listEditTitQueryPreviewWrap {
			.el-form-item {
			    width: 100%;
			}
		}
    }
</style>